<template>
  <div class="money">
    <Tapbar></Tapbar>
    <Lunbo></Lunbo>
    <div class="ringback">
      <div class="div1">
        <h3 class="h3">音频彩铃</h3>
        <div class="div-a">
          <img src="../img/音频彩铃.png" alt="" class="img" />
          <p class="p1">彩铃动 / 趣等待</p>
          <button class="button">开通彩铃服务</button>
          <button class="button">开通彩铃包月</button>
        </div>
      </div>
      <div class="div2">
        <h3 class="h3">视频彩铃</h3>
        <div class="div-a">
          <video
            class="img"
            autoplay
            loop
            muted
            src="http://vod.migu.cn/3wbT1P8+jOTBnmGWtwKlN5Yx2mMZeNv05eLtRpDqWFxwUHT8ZnEeTrXYlTzmepZY1cidS4Zh63aKzf4BpJeXwlIwt4hRl6mYdrTtpB6p3rF0ueO513tsG14RtF9U+CeH0x6Q77OyXVoY+brPKDEqWS3RfAMKGtK+V1SXQCoB1oV8ZulJXuVLJvlECwbywlhr/%E8%A7%86%E9%A2%91%E5%BD%A9%E9%93%83%E4%BB%8B%E7%BB%8D%E2%80%94%E6%89%93%E5%BC%80%E4%BD%A0%E7%9C%BC%E7%95%8C-%E5%92%AA%E5%92%95%E9%9F%B3%E4%B9%90.mp4?msisdn=2a257d4c-1ee0-4ad8-8081-b1650c26390a&spid=600906&sid=53890709646000&timestamp=20180918144940&encrypt=d0351d1ef3ccb993a06aa6870c354b74&k=92381677d7a84311&t=1537260580761&ec=1&FN=%E8%A7%86%E9%A2%91%E5%BD%A9%E9%93%83%E4%BB%8B%E7%BB%8D%E2%80%94%E6%89%93%E5%BC%80%E4%BD%A0%E7%9C%BC%E7%95%8C"
          ></video>
          <p class="p1">让通话前的等待更有趣</p>
          <button class="button">开通视频彩铃</button>
        </div>
      </div>
      <div class="div3">
        <h3 class="h3">彩铃DIY</h3>
        <div class="div-a">
          <img src="../img/彩铃DIY.png" alt="" class="img" />
          <p class="p1">定制专属个性彩铃 / 特立独行</p>
          <button class="button">立刻DIY彩铃</button>
        </div>
      </div>
    </div>
    <div class="to">
      <h2 class="h2">音频彩铃</h2>
      <div class="center">
        <div class="center-q">
          <h3>限时免费</h3>
          <div class="center-w">
            <img src="../img/1.jpg" alt="" />
            <div class="center-a">
              <p>多年以前</p>
              <p class="text">吴奇</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/2.jpg" alt="" />
            <div class="center-a">
              <p>红色高跟鞋</p>
              <p class="text">陈明月</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/3.jpg" alt="" />
            <div class="center-a">
              <p>无限可能...</p>
              <p class="text">袁娅维TIA...</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/4.jpg" alt="" />
            <div class="center-a">
              <p>像我一样</p>
              <p class="text">台风少年团</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/5.jpg" alt="" />
            <div class="center-a">
              <p>你的味道</p>
              <p class="text">ZJ沙楠杰</p>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="center-q">
          <h3>新鲜彩铃</h3>
          <div class="center-w">
            <img src="../img/6.jpg" alt="" />
            <div class="center-a">
              <p>Fight as One</p>
              <p class="text">蔡依林/陈奕迅</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/7.jpg" alt="" />
            <div class="center-a">
              <p>Kid</p>
              <p class="text">吴栩维Noshvia</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/8.jpg" alt="" />
            <div class="center-a">
              <p>爆米花</p>
              <p class="text">时代少年团</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/9.jpg" alt="" />
            <div class="center-a">
              <p>使命(电视剧《一...</p>
              <p class="text">于毅</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/10.jpg" alt="" />
            <div class="center-a">
              <p>放肆爱(网剧《忘...</p>
              <p class="text">陈翔</p>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="center-q">
          <h3>热铃榜</h3>
          <div class="center-w">
            <img src="../img/6.jpg" alt="" />
            <div class="center-a">
              <p>Fight as One</p>
              <p class="text">蔡依林/陈奕迅</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/12.jpg" alt="" />
            <div class="center-a">
              <p>纸船(电视剧《...</p>
              <p class="text">薛之谦/郁可唯</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/8.jpg" alt="" />
            <div class="center-a">
              <p>爆米花</p>
              <p class="text">时代少年团</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/13.jpg" alt="" />
            <div class="center-a">
              <p>野孩子</p>
              <p class="text">于梓贝</p>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="center-q">
          <h3>英语榜</h3>
          <div class="center-w">
            <img src="../img/14.jpg" alt="" />
            <div class="center-a">
              <p>Messiah:part...</p>
              <p class="text">Raymond Leppard</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/15.jpg" alt="" />
            <div class="center-a">
              <p>Debussy:La Fill...</p>
              <p class="text">Danish National S...</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/16.jpg" alt="" />
            <div class="center-a">
              <p>Nurse Maximum</p>
              <p class="text">The Wildhearts</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/17.jpg" alt="" />
            <div class="center-a">
              <p>Magic O' The...</p>
              <p class="text">Larry The Cable G...</p>
            </div>
          </div>
          <div class="center-w">
            <img src="../img/18.jpg" alt="" />
            <div class="center-a">
              <p>Out In The Jun...</p>
              <p class="text">Harpo</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  <flootbar></flootbar>

  </div>
</template>

<script>
import Tapbar from "../components/Tapbar.vue";
import Lunbo from "../components/Lunbo.vue";
import Flootbar from '../components/Flootbar.vue';
export default {
  name: "Money",
  components: {
    Lunbo,
    Tapbar,
    Flootbar,
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.money {
  width: 1920px;

  position: relative;
}
.ringback {
  width: 1407px;
  background: #333;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-content: center;
  position: absolute;
  top: 496px;
  left: 248px;
  z-index: 999;
}
.h3 {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-left: 10px;
  margin: 20px 0 10px 10px;
}
.img {
  width: 446px;
  height: 251px;
  margin: 0 10px 0 10px;
}
.div-a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.p1 {
  height: 70px;
  line-height: 70px;
  font-size: 23px;
  margin: 0 auto;
  color: #fff;
}
.button {
  width: 180px;
  height: 40px;
  margin: 5px auto;
  border-radius: 30px;
  background: #333;
  color: #fff;
}
.button:hover {
  background: red;
}
/deep/ .el-carousel__indicators--horizontal {
  bottom: 550px;
  left: 50%;
  transform: translateX(-50%);
}
.to {
  height: 727px;
  background: #f2f2f2;
}
.h2 {
  font-size: 28px;
  text-align: center;
  padding: 20px 0 20px 0;
}
.center {
  width: 1400px;
  height: 500px;
  margin: 20px auto;

  display: flex;
  justify-content: space-between;
  align-content: center;
}
.center h3 {
  height: 57px;
  font-weight: bold;
  font-size: 20px;
  margin: 15px 0 30px 15px;
  line-height: 57px;
}
.center-q {
  width: 335px;
  height: 500px;
  background: #fff;
  box-sizing: border-box;
}
.center-q:hover h3 {
  color: red;
}
.center-a {
  height: 68px;
  width: 231px;
  padding-left: 20px;
  line-height: 34px;
}
.center-w {
  display: flex;
  align-content: center;
  margin: 0 0 10px 15px;
}
.center-w img {
  width: 56px;
  height: 56px;
}
.text {
  color: #ccc;
}
</style>
